<template>
	<div>
		<el-row :gutter="16">
			<el-col :span="8">
				<div class="left_content dflex_c">
					<div class="dflex_sb dflex_c" style="width: 80%;" v-loading="leftLoading"
						element-loading-background="rgba(255, 255, 255, 0.8)">
						<div class="detail_left dflex_c dflex_d_c">
							<el-image class="headimg"
								:src="shoppingData.notep_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
								:preview-src-list="shoppingData.previewImgs" fit="contain"></el-image>
							<div class="ellipsis_2 left_just">{{ shoppingData.notep_name || '--' }}</div>
						</div>
						<div class="detail_right">
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">性别：</div>
								<div>{{ shoppingData.notep_gender }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">城市：</div>
								<div>{{ shoppingData.notep_city || '--' }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">注册时间：</div>
								<div>{{ shoppingData.create_time }}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="16">
				<div class="right_content dflex_c sele_none">
					<div class="dflex_d_c dflex_c" style="width: 80%;" v-loading="rightLoading"
						element-loading-background="rgba(255, 255, 255, 0.8)">
						<div class="dflex_sb w100">
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">笔</div>
								<div>
									<div class="order_title">笔记数</div>
									<v-countup class="order_data" start-value="0" :end-value="shoppingData.notep_note">
									</v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">关</div>
								<div>
									<div class="order_title">关注数</div>
									<v-countup class="order_data" start-value="0"
										:end-value="shoppingData.notep_attention && shoppingData.notep_attention.length">
									</v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">粉</div>
								<div>
									<div class="order_title">粉丝数</div>
									<v-countup class="order_data" start-value="0"
										:end-value="shoppingData.notep_fans && shoppingData.notep_fans.length">
									</v-countup>
								</div>
							</div>
						</div>
						<div class="dflex_sb w100 margin_t_25">
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">赞</div>
								<div>
									<div class="order_title">获赞数</div>
									<v-countup class="order_data" start-value="0"
										:end-value="shoppingData.notep_praise"></v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">藏</div>
								<div>
									<div class="order_title">收藏数</div>
									<v-countup class="order_data" start-value="0"
										:end-value="shoppingData.notep_collect && shoppingData.notep_collect.length">
									</v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">被</div>
								<div>
									<div class="order_title">被收藏数</div>
									<v-countup class="order_data" start-value="0"
										:end-value="shoppingData.notep_by_collect"></v-countup>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="detail pos_r">
			<el-tabs v-model="tab" @tab-click="cutTabs">
				<el-tab-pane :label="`笔记 ${totalObj.note_cnt || 0}`" name="note">
					<note v-if="tab == 'note'"></note>
				</el-tab-pane>
				<el-tab-pane :label="`收藏 ${totalObj.collect_cnt || 0}`" name="collect">
					<collect v-if="tab == 'collect'"></collect>
				</el-tab-pane>
				<el-tab-pane :label="`喜欢 ${totalObj.like_cnt || 0}`" name="like">
					<like v-if="tab == 'like'"></like>
				</el-tab-pane>
				<el-tab-pane :label="`关注 ${totalObj.attention_cnt || 0}`" name="attention">
					<attention v-if="tab == 'attention'"></attention>
				</el-tab-pane>
				<el-tab-pane :label="`粉丝 ${totalObj.fans_cnt || 0}`" name="fans">
					<fans v-if="tab == 'fans'"></fans>
				</el-tab-pane>
			</el-tabs>
			<div class="btn pos_a">
				<el-button round icon="el-icon-back" class="return-btn" @click="returnPage">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import vCountup from 'vue-countupjs';
	import note from './note';
	import collect from './collect';
	import like from './like';
	import attention from './attention';
	import fans from './fans';
	const __name = 'wmzmall-shopping-user';
	export default {
		components: {
			vCountup,
			note,
			collect,
			like,
			attention,
			fans
		},
		data() {
			return {
				leftLoading: false,
				rightLoading: false,
				dataId: '',
				tab: '',
				shoppingData: {},
				totalObj: {
					note_cnt: 0,
					collect_cnt: 0,
					like_cnt: 0,
					attention_cnt: 0,
					fans_cnt: 0
				}
			};
		},
		methods: {
			async loadData() {
				this.leftLoading = true;
				this.rightLoading = true;
				await this.$db[__name].tofirst({
					_id: this.dataId,
					loading: false
				}).then(res => {
					if (res.code == 200) {
						switch (res.datas.notep_gender) {
							case 1:
								res.datas.notep_gender = '男';
								break;
							case 2:
								res.datas.notep_gender = '女';
								break;
							default:
								res.datas.notep_gender = '未知';
								break;
						}

						res.datas.previewImgs = [(res.datas.notep_headimg && res.datas.notep_headimg.replace(
								"/132", "/0")) ||
							'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'
						];
						res.datas.create_time = new Date(res.datas.create_time).format();

						this.shoppingData = res.datas;
					}
					this.leftLoading = false;
					this.rightLoading = false;
				});
				const totalDatas = await Promise.all([
					this.$db['wmzmall-shopping-note']
					.collection()
					.where({
						create_uid: this.dataId
					})
					.count()
				]);

				this.totalObj.note_cnt = totalDatas[0].result.total;
				this.totalObj.collect_cnt = this.shoppingData.notep_collect.length;
				this.totalObj.like_cnt = this.shoppingData.notep_likes.length;
				this.totalObj.attention_cnt = this.shoppingData.notep_attention.length;
				this.totalObj.fans_cnt = this.shoppingData.notep_fans.length;
			},
			cutTabs(res) {
				uni.setStorage({
					key: '__tabs' + this.$route.path,
					data: res.name
				});
			},
			returnPage() {
				uni.$emit('closeTab');
				uni.redirectTo({
					url: '/pages/marketing/shopping/shopping'
				});
			}
		},
		created() {
			this.dataId = this.$route.query.id || '';
			this.loadData();
		},
		mounted() {
			this.tab = uni.getStorageSync('__tabs' + this.$route.path) || 'note';
		}
	};
</script>

<style>
	.left_content,
	.right_content {
		background-color: #fff;
		height: 200px;
		border-radius: 10px;
	}

	.detail_left {
		margin: 0 80px 0 0;
	}

	.detail_title {
		color: #8a8a8a;
		width: 8.125rem;
		user-select: none;
	}

	.order {
		width: 320px;
		cursor: pointer;
	}

	.circle_txt {
		font-size: 24px;
		color: #fff;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background-color: #ff6b6b;
		transition: transform 0.2s;
	}

	.order:hover .circle_txt {
		transform: scale(1.1);
	}

	.order_title {
		font-size: 14px;
	}

	.order_data {
		font-size: 28px;
	}

	.detail .btn {
		transform: translate(-0, -50%);
		top: 50%;
		right: 0;
	}

	.ellipsis_2 {
		max-width: 100px;
	}
</style>
